<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" right-text="提现明细" title="方糖中心" @clickLeft="leftBack" @clickRight="rightWithdraw" background-color="#318cff" color="#fff"></uni-nav-bar>
		<view class="integral-top"></view>
		<view class="integral-main">
			<view class="dfj-bg-white dfj-mg-lr-30 dfj-bd-radius-20">
				<view class="dfj-pd-20 dfj-t-999 dfj-ps-r dfj-f-30">
					当前方糖
					<view class="integral-label">
						<image src="/static/img/my/hua.png" style="width: 30rpx;height: auto;vertical-align: middle;" mode="widthFix"> 购物当现金</image>
					</view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-pd-lr-20">
					<image style="width: 30rpx;height: auto;" mode="widthFix" src="/static/img/my/integral-icon.png"></image>
					<text class="dfj-pd-lr-30 dfj-t-333 dfj-f-30">{{ loginInfo.userInfo.account.wallet }}</text>
					<view @click="toWithdraw" class="withdraw-btn">提现<image style="width: 50rpx;height: auto;" mode="widthFix" src="/static/img/my/withdraw-icon.png"></image></view>
				</view>
				<view class="dfj-flex dfj-flex-ai-c dfj-t-c">
					<view class="dfj-flex-1 dfj-pd-tb-20 dfj-t-666">
						<view class="dfj-mg-b-5">待到账</view>
						<view>{{ info.allIntegral }}</view>
					</view>
					<view class="dfj-flex-1 dfj-pd-tb-20 dfj-t-666">
						<view class="dfj-mg-b-5">今日到账</view>
						<view>{{ info.todayIntegral }}</view>
					</view>
					<view class="dfj-flex-1 dfj-pd-tb-20 dfj-t-666">
						<view class="dfj-mg-b-5">今日团队收益</view>
						<view>{{ info.teamIntegral }}</view>
					</view>
				</view>
			</view>
			
			<view class="dfj-bd-radius-20 dfj-mg-t-30 dfj-mg-lr-30 dfj-t-666">
				<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-pd-tb-25 dfj-bg-white dfj-bd-b-e5e">
					<view class="dfj-flex-1" :class="item.type == type? 'dfj-t-base':''" v-for="(item,index) in tabs" @click="tab(item.type)">{{ item.name }}</view>
				</view>
				<view class="integral-tabs">
					<view class="dfj-bg-white" v-if="type == 1">
						<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-t-333 dfj-pd-tb-20">
							<view class="dfj-flex-1">日期</view>
							<view class="dfj-flex-1">方糖数量</view>
							<view class="dfj-flex-1">方糖详情</view>
						</view>
						<block v-for="(item,index) in list">
							<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-t-333 dfj-pd-tb-20">
								<view class="dfj-flex-1">{{ item.createDate | timestampToTime }}</view>
								<view class="dfj-flex-1">{{ item.integral }}</view>
								<view class="dfj-flex-1">查看详情<text class="dfj-icon icon-xiajiantou"></text></view>
							</view>
							<view class="dfj-bg-e1e dfj-pd-20">
								<view>{{ item.detail }}</view>
								<view class=" dfj-flex">
									<view class="dfj-flex-1">
										订单号：{{ item.orderNo }}
										<view>{{ item.createDate | timestampToTime }}</view>
									</view>
									<view class="dfj-pd-lr-20">
										<navigator class="dfj-bg-base dfj-t-white dfj-pd-10 dfj-t-c dfj-bd-radius-10 dfj-pd-lr-30" :url="`/pages/my/order-details?orderId=${item.orderId}`">去确认</navigator>
									</view>
								</view>
							</view>
							
						</block>
					</view>
					<view class="dfj-bg-white" v-if="type == 2">
						<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-t-333 dfj-pd-tb-20">
							<view class="dfj-flex-1">日期</view>
							<view class="dfj-flex-1">推荐关系</view>
							<view class="dfj-flex-1">方糖数量</view>
							<view class="dfj-flex-1">方糖详情</view>
						</view>
						<block v-for="(item,index) in listTwo">
							<view class="dfj-flex dfj-flex-ai-c dfj-t-c dfj-t-333 dfj-pd-tb-20">
								<view class="dfj-flex-1">{{ item.createDate | timestampToTime }}</view>
								<view class="dfj-flex-1">{{ item.type==6?'间推':'直推' }}</view>
								<view class="dfj-flex-1">{{ item.integral }}</view>
								<view class="dfj-flex-1">查看详情<text class="dfj-icon icon-xiajiantou"></text></view>
							</view>
							<view class="dfj-bg-e1e dfj-flex dfj-pd-20">
								<view class="dfj-flex-1">你推荐的用户刚刚消费了￥{{ item.costPrice }}</view>
								<view class="dfj-pd-lr-20">
									<view><image :src="item.subUserIconUrl" style="width: 80rpx;height: 80rpx;border-radius: 100%;"></image></view>
									<view>{{ item.subUserName }}</view>
								</view>
							</view>
						</block>
					</view>
					<view v-if="type == 3">
						<block v-for="(item,index) in list">
							<view class="dfj-bg-white dfj-pd-lr-30 dfj-pd-tb-20 dfj-t-666 dfj-mg-b-10">
								<view class="dfj-flex dfj-flex-ai-c">
									<view class="dfj-flex-1 dfj-f-30 dfj-t-333">{{ item.typeName }}</view>
									<view>{{ item.createDate | timestampToTime }}</view>
								</view>
								<view class="dfj-flex dfj-flex-ai-c dfj-mg-t-25">
									<view class="dfj-flex-1 dfj-f-30 dfj-t-333">方糖:{{ item.balance }}</view>
									<view>{{ item.integral }}</view>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{type: 1,name: '待到账明细'},
					{type: 2,name: '团队收益'},
					{type: 3,name: '收支明细'},
				],
				type: 1,
				info: '',
				loginInfo: '',
				page: 1,
				list: [],
				listTwo: []
			}
		},
		filters: {
			timestampToTime(timestamp) {
				var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return Y + M + D + h + m + s;
			}
		},
		onLoad() {
			this.getInfo()
			this.getList()
		},
		onShow() {
			this.loginInfo = JSON.parse(localStorage.getItem('loginInfo'));
		},
		methods: {
			leftBack() {
				uni.navigateBack();
			},
			rightWithdraw() {
				uni.navigateTo({
					url: '/pages/my/Integral-detail'
				})
			},
			tab(i){
				this.type = i
				if(this.type == 1 || this.type == 3){
					this.page = 1;
					this.list= [];
					this.getList()
				}else{
					this.page = 1;
					this.listTwo= []
					this.getListTwo()
				}
			},
			getInfo() {
				this.$http({
					url: '/order/getUserIntegral'
				}).then(res=>{
					this.info = res.data;
				})
			},
			getList() {
				this.$http({
					url: '/userOpt/getUserIntegralDetail',
					data: {
						type: this.type,
						page: this.page
					}
				}).then(res=> {
					if(res.data.list.length>0){
						this.page++;
						this.list.push(...res.data.list)
					}
				})
			},
			getListTwo(){
				this.$http({
					url: '/order/getUserTeamReward',
					data: {
						page: this.page
					}
				}).then(res=> {
					if(res.data.list.length>0){
						this.page++;
						this.listTwo.push(...res.data.list)
					}
				})
			},
			toWithdraw(){
				if(this.loginInfo.userInfo.isAuthentication!=1){
					uni.navigateTo({
						url: '/pages/my/certification'
					})
				}else{
					if(this.loginInfo.bankInfoList.length<=0){
						uni.navigateTo({
							url: '/pages/my/set-bank-add'
						})
					}else{
						uni.navigateTo({
							url: '/pages/my/Integral-withdrawal'
						})
					}
				}
			}
		},
		onReachBottom() {
			if(this.type == 1 || this.type == 3){
				this.getList()
			}else{
				this.getListTwo()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.integral-top{
		height: 150rpx;
		background-color: #318CFF;
	}
	.integral-main{
		position: relative;
		top: -120rpx;
		margin-bottom: -120rpx;
	}
	.integral-label{
		position: absolute;
		top: 30rpx;
		right: 0;
		background: #4dbdf5;
		line-height: 50rpx;
		color: #fff;
		padding: 0 20rpx;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		font-size: 22rpx;
	}
	.withdraw-btn{
		background: #ffce59;
		height: 40rpx;
		line-height: 40rpx;
		position: relative;
		padding: 0 50rpx 0 15rpx;
		color: #fff;
		border-radius: 10rpx;
		image{
			position: absolute;
			right: -10rpx;
			top: -10rpx;
		}
	}
	.integral-tabs{
		table{
			width: 100%;
			th{
				color: #666;
				font-weight: normal;
				padding: 15rpx 0;
			}
			td{
				color: #999;
				padding: 15rpx;
				text-align: center;
			}
		}
	}
</style>
